<template>
  <div>
    <a-row>
      <a-col :flex="1">
        <a-form
          :model="formModel"
          :label-col-props="{ span: 6 }"
          :wrapper-col-props="{ span: 18 }"
          label-align="left"
          ref="searchFormRef"
        >
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item field="number" label="品名">
                <a-select
                  placeholder="请选择品名"
                  v-model="form.product_name_id"
                  allow-clear
                >
                  <a-option
                    v-for="(item, i) in productNameList"
                    :key="i"
                    :value="item.id"
                    :label="item.manage_product_name"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="createdTime" label="出库时间">
                <a-range-picker style="width: 100%" v-model="form.chuku_date" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="number" label="库管">
                <a-select
                  placeholder="请选择库管"
                  v-model="form.house_id"
                  allow-clear
                >
                  <a-option
                    v-for="(item, i) in manageGonghuoList"
                    :key="i"
                    :value="item.id"
                    :label="item.house_name"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="number" label="存放地">
                <a-select
                  placeholder="请选择存放地"
                  v-model="form.address_id"
                  allow-clear
                >
                  <a-option
                    v-for="(item, i) in manageAddressList"
                    :key="i"
                    :value="item.id"
                    :label="item.manage_address"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
      <a-divider style="height: 84px" direction="vertical" />
      <a-col :flex="'86px'" style="text-align: right">
        <a-space direction="vertical" :size="18">
          <a-button type="primary" @click="getNewOutInfo">
            <template #icon>
              <icon-search />
            </template>
            {{ $t('searchTable.form.search') }}
          </a-button>
          <a-button @click="reset">
            <template #icon>
              <icon-refresh />
            </template>
            {{ $t('searchTable.form.reset') }}
          </a-button>
        </a-space>
      </a-col>
    </a-row>
    <a-divider style="margin-top: 0" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
const props = defineProps({
  productNameList: { type: Array },
  manageGonghuoList: { type: Array },
  manageAddressList: { type: Array },
  getBaocaiInfo:{ type: Function },
});
const searchFormRef = ref();

const form = reactive({
  product_name_id: '',
  chuku_date: '',
  address_id: '',
  house_id: '',
});
const reset = () => {
  form.product_name_id = '';
  form.chuku_date = '';
  form.address_id = '';
  form.house_id = '';
  props.getBaocaiInfo(1);
};
const getNewOutInfo = () => {
  props.getBaocaiInfo(1);
};
defineExpose({
  form,
});
</script>

<style scoped lang="less">
</style>